<template>
  <div>
    <el-dialog :title='option.title' :visible.sync='isShow' @close="closeUser" width="890px" @open="openCreate"
      :close-on-click-modal="false" center>
      <div v-loading="loading">
        <div class="content">
          <el-card style="height:450px;">
            <el-form size="mini" ref="form" :model="form" :rules="rules" label-width="140px" label-position="left">
              <el-row :gutter="10">
                <el-col :span="12">
                  <el-form-item prop="ID" v-if="this.option.log=='2'"  label="序号：">
                    <el-input v-model="form.ID" placeholder="请输入序号" disabled></el-input>
                  </el-form-item>
                </el-col>
                <!-- 指标维度 -->
                <el-col :span="12">
                  <el-form-item prop="AGENTFLAG" label="指标维度：">
                    <el-select v-model="form.AGENTFLAG" clearable @change="changeAgent" placeholder="请选择指标维度">
                      <el-option v-for="item in flagList" :key="item.value" :label="item.name" :value="item.value"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <!-- 缓存标识 CACHEFLAG -->
                <el-col :span="12">
                  <el-form-item prop="CACHEFLAG" label="缓存标识：">
                    <el-select v-model="form.CACHEFLAG" clearable placeholder="请选择缓存标识">
                      <el-option v-for="item in STATUSLIST" :key="item.value" :label="item.name" :value="item.value"
                        :disabled="item.disabled"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <!-- 指标key -->
                <el-col :span="12">
                  <el-form-item prop="KPI_KEY" label="请输入指标KEY">
                    <el-select v-model="form.KPI_KEY" filterable clearable placeholder="请选择KEY值：" :loading="loading">
                      <el-option
                        v-for="item in KEYNAMEList"
                        :key="item.ID"
                        :label="item.KEYNAME"
                        :value="item.KEYNAME"
                      ></el-option>
                    </el-select>
                    <!-- <el-input v-model="form.KPI_KEY" placeholder="请输入指标KEY" ></el-input> -->
                  </el-form-item>
                </el-col>
                <!-- 指标名称 -->
                <el-col :span="12">
                  <el-form-item prop="KPI_NAME" label="指标名称：">
                    <el-input v-model="form.KPI_NAME" placeholder="请输入指标名称"></el-input>
                  </el-form-item>
                </el-col>
                <!--英文表达式 EXPRESSION -->
                <!-- <el-col :span="12">
                  <el-form-item prop="EXPRESSION" label="英文表达式:">
                    <el-input v-model="form.EXPRESSION" placeholder="请输入英文表达式：" ></el-input>
                  </el-form-item>
                </el-col> -->
                <!-- 中文表达式 EXPRESSION_NAME -->
                <el-col :span="20">
                  <el-form-item prop="EXPRESSION_NAME" label="中文表达式：">
                    <el-input type="textarea" :autosize="{minRows:6,maxRows:8}" v-model="form.EXPRESSION_NAME"
                      placeholder="请输入中文表达式，例如:视频队列_接通量/视频队列_总进线量" @blur="getValue(form.EXPRESSION_NAME)"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :lg="2" :md="2" :span="3" v-if="btnPermission('Button_User_Add')">
                  <el-button type="primary" size="mini" @click="addSum" :disabled="form.AGENTFLAG == ''||form.KPI_KEY==''||form.KPI_KEY==null || form.AGENTFLAG == null">创建算法</el-button>
                </el-col>
                <!--指标列表 KEYLIST -->
                <el-col :span="22">
                  <el-form-item prop="KEYLIST" label="指标列表：">
                    <el-input type="textarea" disabled :autosize="{minRows:6,maxRows:7}" v-model="form.KEYLIST"
                      placeholder="请输入指标列表，例如:视频队列_接通量|视频队列_总进线量"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
            <!-- 弹窗  -->
            <keep-alive>
              <component :is="dialogList.addSumDialog" :option="dialogOptions" v-on:tiggle="getValue"></component>
            </keep-alive>
          </el-card>
          <div style="text-align:center;margin-top:20px">
            <el-button size="mini" @click='addType'>取消</el-button>
            <el-button type="primary" size="mini" @click="add">确认</el-button>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import Add from "@/message/paramManagement/indicatorMaintenance/add";
  import Update from "@/message/paramManagement/indicatorMaintenance/update";
  import requestYg from "@/common/utils/requestYg";
  import toolBox from "@/common/utils/toolBox";
  import addSumDialog from "./addSumDialog";
  import queryMonitorKey from "@/message/paramManagement/monitorKey/queryMonitorKey";

  export default {
    name: "",
    data() {
      return {
        KEYNAMEList: [],  //监控因子列表
        loading: false,
        flagList: [{
            name: "坐席",
            value: "agent"
          },
          {
            name: "队列",
            value: "queue"
          },
        ],
        STATUSLIST: [{
            name: "是",
            value: "0"
          },
          {
            name: "否",
            value: "1"
          },
        ],
        form: {
          ID: "",
          KPI_KEY: "",
          KPI_NAME: "",
          EXPRESSION: "",
          EXPRESSION_NAME: "",
          AGENTFLAG: "",
          CACHEFLAG: "",
          OPERANO: "",
          WORKDATE: "",
          WORKTIME: "",
          KEYLIST: "",
        },
        rules: {
          // KPI_KEY: [{
          //   required: true,
          //   message: "指标KEY必填",
          //   trigger: "blur"
          // }],
          // KPI_NAME: [{
          //   required: true,
          //   message: "指标名称必填",
          //   trigger: "blur"
          // }],
          AGENTFLAG: [{
            required: true,
            message: "指标维度必填",
            trigger: "change"
          }],
          CACHEFLAG: [{
              required: true,
              message: "缓存标识表必填",
              trigger: "change"
            }
          ],
        },
        dialogList: {
          //指定被渲染组件列表
          addSumDialog,
        },
        // 对话框2
        dialogOptions: {
          //新增
          isShow: false,

        },
      }
    },
    props: {
      //父元素传递的数据
      option: Object
    },
    components: {},
    computed: {
      isShow: {
        //创建用户弹窗是否显示
        get: function () {
          return this.option.isShow;
        },
        set: function (newValue) {
          this.option.isShow = newValue;
        }
      }
    },
    created: function () {
    },
    watch: {},
    methods: {
      // 修改指标维度
      changeAgent(){
        this.queryMonitorKey()
      },
       // 根据类型选择监控KEY值
    async queryMonitorKey() {
      let resBody = new queryMonitorKey();
      resBody.data.KEYTYPE = this.form.AGENTFLAG;
      resBody.data.STATUS = '1'
      resBody.data.PAGEFLAG = 4;
      resBody.data.PAGEROWNUM = 1000;
      resBody.data.CURRPAGE = 1;
      requestYg(resBody)
        .then(response => {
          if (response.SYS_HEAD.ReturnCode === "000000") {
            this.KEYNAMEList = response.RSP_BODY.struct || [];
          } else {
            this.$message({
              type: "error",
              message: response.SYS_HEAD.ReturnMessage
            });
            this.KEYNAMEList = [];
          }
          this.loading = false;
        })
        .catch(error => {
          this.loading = false;
        });
    },
      // 打开对话框2
      addSum() {
        this.dialogOptions.isShow = true;
        this.dialogOptions.title = "创建算法";
        this.dialogOptions.AGENTFLAG = this.form.AGENTFLAG;
        this.dialogOptions.key = this.form.KPI_KEY;
      },
      //打开对话框2的自定义事件
      getValue(express) {
        this.form.EXPRESSION_NAME = express;
        var info = this.form.EXPRESSION_NAME.replace(/[+ - * / |]/g,'|').replace(/[( )]/g,'').replace(/\|\d+\|/g,'|')
          .replace(/\|\d+/g,'|').replace(/\d+\|/g,'|');
        if(info[0] == '|'){
          info = info.substring(1,info.length); 
        }
        if(info[info.length-1] == '|'){
          info = info.substring(0,info.length-1); 
        }
        this.form.KEYLIST = info;
        // console.log(info.replace(/[| 0-9 |]{1,}/g,'|'));
      },
      // 加载对话框2的因子下拉查询
      refreshMonikey() {

      },
      add() {
        //添加
        this.$refs["form"].validate(valid => {
          if (valid) {
            this.loading = true;
            let resBody = this.option.log == "1" ? new Add() : new Update();
            if (this.option.log == "2") {
              resBody.data.ID = this.form.ID;
            }
            resBody.data.KPI_KEY = this.form.KPI_KEY;
            resBody.data.KPI_NAME = this.form.KPI_NAME;
            resBody.data.EXPRESSION = this.form.EXPRESSION;
            resBody.data.EXPRESSION_NAME = this.form.EXPRESSION_NAME;
            resBody.data.AGENTFLAG = this.form.AGENTFLAG;
            resBody.data.CACHEFLAG = this.form.CACHEFLAG;
            resBody.data.OPERANO = this.$store.getters.UserNum;
            resBody.data.KEYLIST = this.form.KEYLIST;
            requestYg(resBody)
              .then(response => {
                if (response.SYS_HEAD.ReturnCode === "000000") {
                  let mes = this.option.log == "1" ? "新增" : "修改";
                  this.$message({
                    type: "success",
                    message: `指标维护${mes}${response.SYS_HEAD.ReturnMessage}!`
                  });
                  this.isShow = false;
                } else {
                  this.$message({
                    type: "error",
                    message: `${response.SYS_HEAD.ReturnMessage}!`
                  });
                }
                this.loading = false;
              })
              .catch(error => {
                this.loading = false;
              });
            this.$refs.form.clearValidate(); //清楚表单验证
            this.$refs.form.resetFields();
          } else {
            this.$message({
              type: "warning",
              message: "指标维护请输入合法的数据！"
            });
            return false;
          }
        });
      },
      openCreate() {
        
        //打开弹窗事件
        this.$nextTick(()=> {
          if (this.option.log == "2") {
            this.updateDate();
          } else {
            this.queryMonitorKey()
            this.form = {
              ID: "",
              KPI_KEY: "",
              KPI_NAME: "",
              EXPRESSION: "",
              EXPRESSION_NAME: "",
              AGENTFLAG: "",
              CACHEFLAG: "",
              OPERANO: "",
              WORKDATE: "",
              WORKTIME: "",
              KEYLIST: "",
            };
          }
        })
      },
      updateDate() {
        this.form = JSON.parse(JSON.stringify(this.option.currentRow));
        this.queryMonitorKey()
      },
      closeUser() {
        //关闭弹窗清楚表单数据并清楚表单验证
        // 重置表单数据
        this.$refs.form.clearValidate(); //清楚表单验证
        this.$refs.form.resetFields();
        this.$emit("refreshTable");
      },
      addType() { //关闭弹窗事件，清楚表单验证
        this.option.isShow = false;
        // this.$refs.form.clearValidate();
        // this.$refs.form.resetFields();
      },
    },
  };

</script>
<style lang="scss" scoped>
  .content {
    display: flex;
    flex-direction: column;
  }

  .require {
    color: red;
  }

  .dialog-text {
    display: inline-block;
    width: 100%;
    text-align: center;
    color: red;
    font-size: 18px;
  }

  .role {
    width: 95%;
    border: 1px solid #eee;
    border-radius: 4px;
    height: 290px;

    .roleHeader {
      color: #606266;
      font-weight: 500;
      font-size: 14px;
      background: #f5f7fa;
      height: 42px;
      box-sizing: border-box;
      padding: 9px;
      overflow-y: auto;
    }
  }

  .el-card {
    overflow: inherit;
  }

</style>
